<template>
    <div id="app">
        <!-- 顶部广告 banner -->
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" style="height: 300px; width: 100%;" />
            </van-swipe-item>
        </van-swipe>
        <Button></Button>

        <!-- 会员信息区域 -->
        <div class="member-info">
            <div class="avatar">
                <img src="@/assets/1.png" alt="avatar" />
            </div>
            <div class="member-text">
                <p class="phone">{{ phone }}</p>
                <p class="member-level">微雪花会员</p>
                <div class="progress">
                    <div class="progress-bar" :style="{ width: progressWidth }"></div>
                    <span class="progress-text">{{ progressValue }}/30</span>
                </div>
                <div class="snow-coin-coupon">
                    <span>金币: 0</span>
                    <span>优惠券: 6</span>
                </div>
            </div>
        </div>

        <!-- 会员特权 -->
        <div class="member-privilege">
            <span>会员特权</span>
            <span>周一咖啡日，3.99元起喝美式</span>
        </div>

        <!-- 功能模块 -->
        <div class="function-modules">
            <div class="module-item" @click="handleModule('selfPickup')">
                <img src="@/assets/ddzq.png" alt="selfPickup" />
                <p>到店自取</p>
                <p>下单免排队</p>
            </div>
            <div class="module-item" @click="handleModule('homeDelivery')">
                <img src="@/assets/wm.png" alt="homeDelivery" />
                <p>急速外送</p>
                <p>甜蜜送到家</p>
            </div>
        </div>

        <!-- 其他功能入口 -->
        <div class="other-functions">
            <div class="function-item" @click="handleFunction('giftCard')">
                <img src="@/assets/lpk.png" alt="giftCard" />
                <p>礼品卡</p>
                <p>送TA心意</p>
            </div>
            <div class="function-item" @click="handleFunction('group')">
                <img src="@/assets/jpyl.png" alt="group" />
                <p>进群有礼</p>
                <p>30元券包</p>
            </div>
            <div class="function-item" @click="handleFunction('magicShop')">
                <img src="@/assets/dp.png" alt="magicShop" />
                <p>雪王魔法铺</p>
                <p>0元兑周边</p>
            </div>
            <div class="function-item" @click="handleFunction('dailyLottery')">
                <img src="@/assets/zp.png" alt="dailyLottery" />
                <p>每日抽奖</p>
                <p>会员免费抽</p>
            </div>
        </div>

        <!-- 商品列表展示 -->
        <div class="product-list">
            <h2 class="product-title">热门商品</h2>
            <div class="product-grid">
                <div class="product-card" v-for="product in products" :key="product.id">
                    <img :src="product.image_url || '@/assets/default_product.png'" alt="product image"
                        class="product-image" @click="goToProductDetail(product.id)"/>
                    <div class="product-info">
                        <h3 class="product-name">{{ product.name }}</h3>
                        <div class="product-price">¥{{ product.price.toFixed(2) }}</div>
                        <button class="add-to-cart" @click="addToCart(product)">加入购物车</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import Button from '@/components/Button.vue';
import api from '@/api/history';

const router = useRouter()
const phone = localStorage.getItem('phone');
const images = ref([]);
const products = ref([]);
const progressValue = ref(15); // 示例进度值
const progressWidth = ref(`${(progressValue.value / 30) * 100}%`);

// 处理功能模块点击
const handleModule = (type) => {
    console.log(`跳转到${type}页面`);
    // 实际项目中添加导航逻辑
};

// 处理其他功能点击
const handleFunction = (type) => {
    console.log(`跳转到${type}页面`);
    // 实际项目中添加导航逻辑
};

// 添加到购物车功能
const addToCart = (product) => {
    console.log(`添加商品 ${product.name} 到购物车`);
    // 实际项目中添加购物车逻辑
};

onMounted(async () => {
    // 获取轮播图数据
    try {
        const response = await api.get('/homepage/carousel');
        console.log('轮播图数据:', response);
        if (response.status === 200) {
            images.value = response.data.map(item => item.images);
        }
    } catch (error) {
        console.error('获取轮播图数据失败', error);
        // 可以添加错误提示逻辑
    }

    // 获取商品数据
    try {
        const response = await api.get('/api/hot/1');
        console.log('商品数据:', response);
        if (response.status === 200) {
            products.value = response.data.map(item => ({
                ...item,
                // 添加默认图片处理
                imageUrl: item.imageUrl || '@/assets/default_product.png'
            }));
        }
    } catch (error) {
        console.error('获取商品数据失败', error);
        // 可以添加错误提示逻辑
    }
});

const goToProductDetail = async (productId) => {
  try {
    const userId = 1 || route.params.userId; 
    await recordBrowse(userId, productId); 
    console.log(`已记录商品[${productId}]的浏览历史`);
  } catch (error) {
    console.log('记录浏览历史失败（不影响跳转）:', error);
  } finally {
    router.push({ name: 'ProductDetail', params: { id: productId } });
  }
};
</script>

<style scoped>
#app {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 轮播图区域 */
van-swipe {
    width: 100%;
}

van-swipe-item img {
    height: 180px !important;
    object-fit: cover;
}

/* 按钮样式 */
Button {
    margin: 12px 15px;
    padding: 10px 0;
    width: calc(100% - 30px);
    background-color: #ff6b35;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

/* 会员信息区域 */
.member-info {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: white;
    margin-bottom: 10px;
    border-radius: 12px;
    margin: 0 15px 15px;
}

.avatar img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid #ffefe5;
}

.member-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.phone {
    font-weight: bold;
    font-size: 16px;
    margin: 0;
}

.member-level {
    color: #ff6b35;
    font-size: 14px;
    margin: 0;
    background-color: #fff7f2;
    width: fit-content;
    padding: 2px 8px;
    border-radius: 12px;
}

.progress {
    width: 100%;
    height: 8px;
    background-color: #f5f5f5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: #ff6b35;
    border-radius: 4px;
}

.progress-text {
    font-size: 12px;
    color: #666;
    margin-left: 10px;
    position: absolute;
}

.snow-coin-coupon {
    display: flex;
    gap: 20px;
    margin-top: 4px;
}

.snow-coin-coupon span {
    color: #666;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.snow-coin-coupon span::before {
    content: '';
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
}

.snow-coin-coupon span:first-child::before {
    background-image: url('');
}

.snow-coin-coupon span:last-child::before {
    background-image: url('');
}

/* 会员特权 */
.member-privilege {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background-color: #fff7f2;
    margin: 0 15px 15px;
    border-radius: 12px;
}

.member-privilege span:first-child {
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px;
}

.member-privilege span:first-child::before {
    content: '';
    width: 18px;
    height: 18px;
    background-image: url('');
    background-size: contain;
    background-repeat: no-repeat;
}

.member-privilege span:last-child {
    color: #ff6b35;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.member-privilege span:last-child::after {
    content: '';
    width: 12px;
    height: 12px;
    background-image: url('');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 4px;
}

/* 功能模块 */
.function-modules {
    display: flex;
    gap: 15px;
    padding: 0 15px 15px;
}

.module-item {
    flex: 1;
    background-color: white;
    border-radius: 12px;
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.module-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.module-item p {
    margin: 0;
}

.module-item p:first-of-type {
    font-weight: 500;
    font-size: 15px;
}

.module-item p:last-of-type {
    font-size: 12px;
    color: #666;
}

/* 其他功能入口 */
.other-functions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0 15px 15px;
}

.function-item {
    flex: 1;
    min-width: calc(25% - 11px);
    background-color: white;
    border-radius: 12px;
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.function-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.function-item p {
    margin: 0;
    font-size: 13px;
}

.function-item p:last-of-type {
    font-size: 11px;
    color: #666;
}

/* 商品列表展示 */
.product-list {
    padding: 0 15px 20px;
}

.product-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 15px;
    display: flex;
    align-items: center;
}

.product-title::after {
    content: '';
    width: 4px;
    height: 18px;
    background-color: #ff6b35;
    margin-right: 8px;
}

.product-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.product-card {
    flex: 1;
    min-width: calc(50% - 8px);
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.product-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.product-info {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.product-name {
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-desc {
    font-size: 12px;
    color: #666;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
} 

.product-price {
    color: #ff6b35;
    font-weight: bold;
    font-size: 16px;
    margin: 0;
    display: flex;
    align-items: center;
}

.add-to-cart {
    background-color: #ff6b35;
    color: white;
    border: none;
    padding: 8px 0;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 8px;
    transition: background-color 0.2s;
}

.add-to-cart:hover {
    background-color: #ff521a;
}
</style>